import React, { useRef, useState } from 'react';
import { Carousel, Spin } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
const images = import.meta.glob('../../images/carousel/*.jpg', { eager: true });


const Hero = () => {
  const [onload, setOnload] = useState(true); // 控制 Spin 显示状态

  const handleImageLoad = () => {
    setOnload(false);
  }

  const carouselRef = useRef(null);

  const onNext = () => {
    carouselRef.current.next();
  };

  const onPrev = () => {
    carouselRef.current.prev();
  };

  return (
    <div className="group relative hidden md:block">
      <Carousel ref={carouselRef} autoplay autoplaySpeed={3000} className="w-full max-h-[440px]">
        {Object.entries(images).map(([path, image]) => (
          <Spin spinning={onload} key={path}>
            <img src={image.default} className="w-full max-h-[440px] object-cover" alt="" onLoad={handleImageLoad}/>
          </Spin>
        ))}
      </Carousel>

      <LeftOutlined
        className="text-white absolute top-1/2 transform -translate-y-1/2 left-2 cursor-pointer z-10 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        style={{ backgroundColor: 'rgba(31,45,61,.11)' }}
        onClick={onPrev}
      />

      <RightOutlined
        className="text-white absolute top-1/2 transform -translate-y-1/2 right-2 cursor-pointer z-10 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        style={{ backgroundColor: 'rgba(31,45,61,.11)' }}
        onClick={onNext}
      />

    </div>

  );
}
export { Hero };